<template>
    <div class="g-item" ref="pieChart"></div>
</template>

<script>
import echarts from 'echarts'; // 导入 ECharts 库
import request from "@/util/request.js";

export default {
    mounted() {
      this.renderPieChart(); // 在组件挂载后渲染饼图
      this.getAwardData(); // 初始获取一次数据
    },
    data() {
        return {
            awardsForClass: [],
        };
    },
    methods: {
        getAwardData() {
            request.get("/info_award/countByClass").then(res => {
                this.awardsForClass = []; // 清空数组
                this.awardsForClass.push(...res.data.data); // 添加新数据
                this.updateData(); // 更新图表数据
            });
        },

        updateData() {
            const chartContainer = this.$refs.pieChart; // 获取饼图容器
            const chart = echarts.getInstanceByDom(chartContainer); // 获取 ECharts 实例
            // 更新饼图的数据
            chart.setOption({
                series: [{
                    data: this.awardsForClass
                }]
            });
        },
        renderPieChart() {
            const chartContainer = this.$refs.pieChart; // 获取饼图容器
            const chart = echarts.init(chartContainer); // 初始化 ECharts 实例

            // 饼图的数据和配置
            const option = {
                title: {
                    text: '各班奖项', // 设置顶部标题
                    top: '10px', // 设置顶部标题的位置
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '50%'], // 设置图表居中显示
                    data: this.awardsForClass
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            chart.setOption(option);
        }
    }
};
</script>

<style scoped>

</style>
